<template>
    <div class="dataPageListComponent" v-if="oItem">
      <div class="content">
        <div class="item" v-for="l in list" :key="l.id">
          <div class="head">
            <div class="left">{{l.time}}</div>
            <div class="right" :style="{color:oItem.main.dataPageLinkColor}">
              <span>查看下级</span>
              <i class="iconfont icon-anniuzujian-"></i>
            </div>
          </div>
          <ul class="body" :style="{
          backgroundColor: oItem.main.dataPageBgColor,
          backgroundImage: 'url(' + oItem.main.dataPageBgImg + ')',
        }">
            <li v-for="ll in l.list" :key="l.id+'_'+ll.id">
              <p class="name" :style="{ color: oItem.main.titleFontColor }">{{ ll.name }}</p>
          <p class="num">
            <span class="val" :style="{ color: oItem.main.dataFontColor }">{{
              ll.num
            }}</span>
            <span class="suffix" :style="{ color: oItem.main.titleFontColor }">{{
              ll.suffix
            }}</span>
          </p>
            </li>
          </ul>
        </div>
      </div>

      <!-- <div class="floatButton1" v-if="oItem.main.dataPageFloatBtn1Display&&(oItem.main.dataPageFloatBtnImg1||oItem.main.dataPageFloatBtnIcon1)" :style="{
        borderColor: oItem.main.floatBtnBorderColor||'transparent',
        backgroundColor: oItem.main.floatBtnBgColor,

    left: (oItem.main.floatBtn1Positon=='br' || oItem.main.floatBtn1Positon=='tr') ? 'auto': ('calc(50% + '+ (oItem.main.floatBtn1OffsetLeftAndRight)+'px)'),
    top: (oItem.main.floatBtn1Positon=='bl' || oItem.main.floatBtn1Positon=='br') ? 'auto': ('calc(50% - '+(25+160+oItem.main.floatBtn1OffsetUpAndDown)+'px)'),
    right: 'calc(50% - 90px)',
    bottom: (oItem.main.floatBtn1Positon=='tl' || oItem.main.floatBtn1Positon=='tr') ? 'auto': ('calc(50% - '+(25+160+oItem.main.floatBtn1OffsetUpAndDown)+'px)'),  

}" :class="oItem.main.floatBtn1Positon">
        <img :src="oItem.main.dataPageFloatBtnImg1" v-if="oItem.main.dataPageFloatBtnImg1" alt="">
        <i :class="oItem.main.dataPageFloatBtnIcon1" v-if="!oItem.main.dataPageFloatBtnImg1&&oItem.main.dataPageFloatBtnIcon1" :style="{color:oItem.main.floatBtnIconColor}"></i>
      </div> -->

      <!-- <div class="floatButton2" v-if="oItem.main.dataPageFloatBtn2Display&&(oItem.main.dataPageFloatBtnImg2||oItem.main.dataPageFloatBtnIcon2)" :style="{
        borderColor: oItem.main.floatBtnBorderColor||'transparent',
        backgroundColor: oItem.main.floatBtnBgColor,

    left: (oItem.main.floatBtn2Positon=='br' || oItem.main.floatBtn2Positon=='tr') ? 'auto': ('calc(50%' + (60 + oItem.main.floatBtn2OffsetLeftAndRight)+'px)'),
    top: (oItem.main.floatBtn2Positon=='bl' || oItem.main.floatBtn2Positon=='br') ? 'auto': (oItem.main.floatBtn2OffsetUpAndDown+'px'),
    right: (oItem.main.floatBtn2Positon=='bl' || oItem.main.floatBtn2Positon=='tl') ? 'auto': (oItem.main.floatBtn2OffsetLeftAndRight+'px'),
    bottom: (oItem.main.floatBtn2Positon=='tl' || oItem.main.floatBtn2Positon=='tr') ? 'auto': (oItem.main.floatBtn2OffsetUpAndDown+'px'),  


      }" :class="oItem.main.floatBtn2Positon">
        <img :src="oItem.main.dataPageFloatBtnImg2" v-if="oItem.main.dataPageFloatBtnImg2" alt="">
        <i :class="oItem.main.dataPageFloatBtnIcon2" v-if="!oItem.main.dataPageFloatBtnImg2&&oItem.main.dataPageFloatBtnIcon2" :style="{color:oItem.main.floatBtnIconColor}"></i>
      </div> -->

    </div>
</template>
<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
export default {
    name: "dataPageListComponent",
    data() {
        return {
            oItem: null,
            list: [
              {
                id:1,time:"2020-11-07",
                list: [
                  { id: 1, name: "实名数", num: "6", suffix: "个" },
                  { id: 2, name: "T+1预估有效实名", num: "0", suffix: "" },
                  { id: 3, name: "T+7实名数", num: "0", suffix: "" },
                  { id: 4, name: "核销数", num: "9", suffix: "个" },
                  { id: 5, name: "T+1预估有效核销", num: "4", suffix: "个" },
                ],
              },{
                id:2,time:"2020-11-07",
                list: [
                  { id: 1, name: "实名数", num: "6", suffix: "个" },
                  { id: 2, name: "T+1预估有效实名", num: "0", suffix: "" },
                  { id: 3, name: "T+7实名数", num: "0", suffix: "" },
                  { id: 4, name: "核销数", num: "9", suffix: "个" },
                  { id: 5, name: "T+1预估有效核销", num: "4", suffix: "个" },
                ],
              }
              // ,{
              //   id:3,time:"2020-11-07",
              //   list: [
              //     { id: 1, name: "实名数", num: "6", suffix: "个" },
              //     { id: 2, name: "T+1预估有效实名", num: "0", suffix: "" },
              //     { id: 3, name: "T+7实名数", num: "0", suffix: "" },
              //     { id: 4, name: "核销数", num: "9", suffix: "个" },
              //     { id: 5, name: "T+1预估有效核销", num: "4", suffix: "个" },
              //   ],
              // },{
              //   id:4,time:"2020-11-07",
              //   list: [
              //     { id: 1, name: "实名数", num: "6", suffix: "个" },
              //     { id: 2, name: "T+1预估有效实名", num: "0", suffix: "" },
              //     { id: 3, name: "T+7实名数", num: "0", suffix: "" },
              //     { id: 4, name: "核销数", num: "9", suffix: "个" },
              //     { id: 5, name: "T+1预估有效核销", num: "4", suffix: "个" },
              //   ],
              // }
            ]
        }
    },
    created() {},
    props: ["item", "ename", "id"],
    components: {},
    mounted() {
         this.$nextTick(() => {
      this.init();
    });
    const emitName = this.ename + this.id;
    Bus.$off(emitName);
    Bus.$on(emitName, (control) => {
      //console.log("backTopComponent被通知更新");
      this.oItem = null;
      this.$nextTick(() => {
        this.oItem = JSON.parse(control);
      });
    });
    },
    methods: {
        //页面初始化
    init() {
      this.oItem = null;
      this.oItem = JSON.parse(JSON.stringify(this.item));
    },
    },
    computed: mapState(["decorate"]),
    watch: {},
}
</script>
<style scoped lang="scss">
.dataPageListComponent{
  .content{
    .item{margin:0 15px 15px;display:flex;flex-direction:column;flex:1;
      .head{display:flex; justify-content: space-between;
      height:30px;margin-bottom:5px; padding:0 5px 0 10px;box-sizing:border-box;
        .left{display:flex;align-items: center;opacity:0.7;}
        .right{font-size:14px;display:flex;align-items: center;color:#5683F9;
          i{font-size:12px;}
        }
      }
      .body{border-radius: 10px;background-color:#fff;
    box-shadow: 3px 3px 3px #eee,-3px 3px 3px #eee,3px -3px 3px #eee,-3px -3px 3px #eee;
      display:flex;flex-wrap:wrap;padding: 30px 0 15px;
      background-position:center center;
      background-repeat:no-repeat;
      background-size:cover;
      li{width:33.33%;display:flex;
      flex-direction: column; 
      align-items: center;margin-bottom: 15px;
        .name{font-size:14px;opacity: 0.7;margin-bottom: 8px;}
        .num{
          .val{font-size:22px;margin-right: 2px;}
          .suffix{font-size:14px;opacity: 0.7;}
        }
      }
    }
    }
  }
}
</style>
<style lang="scss">
.dataPageListComponent{
  .floatButton1{position: fixed;
  z-index: 10;border-radius:10px 0 0 10px;border:5px solid #fff;border-right:0;
  box-shadow: -3px -3px 3px #eee,-3px 3px 3px #eee,3px -3px 3px #eee;width:60px;height:50px;display:flex;align-items: center;
  justify-content: center;cursor: pointer;
  i{font-size:24px;opacity:0.9;}
  img{width:100%;height:100%;border-radius:6px 0 0 6px;}
  }
  .floatButton1.br{left:auto!important;top:auto!important;}
  .floatButton1.bl{right:auto!important;top:auto!important;}
  .floatButton1.tr{left:auto!important;bottom:auto!important;}
  .floatButton1.tl{right:auto!important;bottom:auto!important;}
  .floatButton2{position: absolute;z-index: 10;border-radius:100%;border:5px solid #fff;
  box-shadow: -3px -3px 3px #eee,-3px 3px 3px #eee,3px -3px 3px #eee;width:60px;height:60px;display:flex;align-items: center;
  justify-content: center;cursor: pointer;
    i{font-size:24px;opacity:0.9;}
    img{width:100%;height:100%;border-radius:100%;}
  }
  .floatButton2.br{left:auto!important;top:auto!important;}
  .floatButton2.bl{right:auto!important;top:auto!important;}
  .floatButton2.tr{left:auto!important;bottom:auto!important;}
  .floatButton2.tl{right:auto!important;bottom:auto!important;}
}
</style>
